<template>
  <div class="did-h">
    <!-- 搜索框 -->
    <div style="width:80%;height:100px;margin:auto;margin-top:30px">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="任务名称" value="1"></el-option>
          <el-option label="类型" value="2"></el-option>
          <el-option label="来源" value="3"></el-option>
          <el-option label="时间" value="4"></el-option>
          <el-option label="优先级" value="5"></el-option>
          <el-option label="操作" value="6"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      ref="multipleTable"
      :row-class-name="tableRowClassName"
      tooltip-effect="dark"
      style="width: 80%"
      :default-sort="{prop: 'date', order: 'descending'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="任务名称" width="550"></el-table-column>
      <el-table-column prop="source" label="来源" width="400"></el-table-column>
      <el-table-column prop="date" label="日期" width="120" sortable></el-table-column>
      <el-table-column prop="sort" label="优先级" width="120"></el-table-column>
      <el-table-column prop="handle" label="操作" show-overflow-tooltip>
        <template>
          <img src="../../../assets/img/jwl/downLoad.png" alt class="icon" @click="downLoad" />
          <img src="../../../assets/img/jwl/zhuanfa.png" alt class="icon" @click="zhuanfa" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="100" style="margin-top:30px"></el-pagination>
  </div>
</template>
<script>
import NoData from '../../../components/noData.vue';
export default {
  created() {
    this.tacticalChainDid = this.$route.query.tacticalChainDid;
  },
  components: {
    NoData,
  },
  data() {
    return {
      input3: '',
      select: '',
      tacticalChainDid:"",
      tableData:  [],
    };
  },
  mounted() {},
  methods: {
    downLoad(e) {
      if (confirm('IPFS文件下载成功！')) {
        // 用户点击了确定按钮
      } else {
        // 用户点击了取消按钮
      }
    },
    zhuanfa(e) {
      this.$router.push({ name: 'ipfsUpload' });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(111)
      if (rowIndex % 2 === 1) {
        return 'success-row';
      }
      return '';
    },
    formatter(row, column) {
      return row.address;
    },
  },
};
</script>
<style lang="less" scoped>
.el-select .el-input {
  width: 80px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  padding-top: 5px;
  cursor: pointer;
}
</style>
